import { useEffect, useState } from 'react';
import { IcaptchaImageType, ILogin} from '@/types/user';
import { apiInterceptors, getCaptcha } from '@/client/api';
import classes from './index.module.scss';
import LoginForm from '@/pages/login/component/loginForm/index';
import Image from "next/image";

const Login = () => {
  // 控制 login 与 register 切换
  const [login, setLogin] = useState({
    userName: '',
    password: '',
    code: '',
    uuid: '',
  } as ILogin);
  const [svgCode, setSvgCode] = useState<IcaptchaImageType>({
    img: '',
    uuid: '',
  });

  // 验证图片
  const getCaptchaImage = async () => {
    try {
      const {
        data: { result },
      } = await apiInterceptors(getCaptcha());
      setSvgCode(result);
    } catch (error) {}
  };

  useEffect(() => {
    getCaptchaImage();
  }, []);

  return (
    <div className={classes['login-container']}>
      <div className={classes['login-sencond-box']}>
        <div className={classes['left-img']}>
          {/*<div className={classes['react-logo']}></div>*/}
          {/*<Image src='/bg.jpg' alt="MarvelGPT" width='100%' className="w-full h-full" />*/}
          {/*<h1 className={classes['project-name']}>MarvelGPT Admin</h1>*/}
        </div>
        {/* login && Register */}
        <div className={classes['login-box']}>
            <LoginForm loginData={login} svgCode={svgCode} getCaptchaImage={getCaptchaImage} />
        </div>
        {/*<div className={classes.copyright}>Copyright © 2023-current top All Rights Reserved</div>*/}
      </div>
    </div>
  );
};

export default Login;
